<template>
	<div class="image-view" v-if="images.length">
		<template v-for="(item, index) in images">
			<a v-if="item.link" :href="`${item.link}${extQueryId}`" :key="'link' + index">
				<img :src="`${item.url}`" :alt="item.name" />
			</a>
			<img v-else :src="`${item.url}`" :alt="item.name" :key="index" />
		</template>
	</div>
</template>
<script>
import { clickIdKeys } from '@/config'
export default {
	name: 'image-view',
	props: {
		view: {
			type: Object,
			default: () => ({}),
		},
	},
	computed: {
		options() {
			return this.view.options
		},
		images() {
			return this.options.images || []
		},
		extQueryId() {
			const { query } = this.$route
			let url = ''

			for (let key in query) {
				if (clickIdKeys.includes(key)) {
					url = url + `&${key}=${query[key]}`
				}
			}

			return url
		},
	},
}
</script>
<style lang="scss" scoped>
.image-view {
	min-height: 50px;
	img {
		width: 100%;
		vertical-align: middle;
		font-size: 0;
	}
}
</style>
